<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/default.xhtml"
		 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:o="http://openfaces.org/"
      xmlns:c="http://java.sun.com/jstl/core" >
	<ui:define name="title">#{msg.navBarDeathGroupHead}</ui:define>
	
	<ui:param name="hideTabBar" value="true" />

	<ui:define name="display">
    <style>
		.base-table {
			border:0px solid #98BF21;
			border-collapse:collapse;
			border-color:#888;
			table-layout:fixed;
		}
		   		
		.base-table th {
		   	background-color:#B9D264;
			font-weight:bold;
			font-size:.9em;
			overflow:hidden;
		 }
		   		
		.base-table td {
		   	padding:5px 5px 5px;
		   	text-align:center;
		 }
		   		
		.base-table a {
		   	width:100%;
			border:0;
		 }
		   		
		 .base-table .alt {
		   	background-color:#CCC;
		 }
		   		
		.base-table .alt-col {
			width:40%;
		 }
		 
		.base-table-center {
		   	margin:0 auto;
		 }
	</style>
    
    <h:outputText value="#{navController.breadcrumbTrail}" />
       
    <h1><h:outputText value="#{msg.navBarDeathGroupHead}" /></h1>
    
    <c:if test="#{flowScope.step >= 1 and flowScope.deathHOH}">   
    	<h:outputText value="#{msg.deathHOHDeathCreate} #{deathHOHBean.group.groupHead.extId}: #{deathHOHBean.group.groupHead.firstName} #{deathHOHBean.group.groupHead.lastName}" />
    	<br /><br />
    </c:if>
    
    <h:messages id="errors" globalOnly="true" />
    <h:form id="form">
	   	<table>
	   		<tr>
	 			<td><h:outputText value="#{msg.socialGroupId}:" rendered="#{flowScope.step >= 0}" /></td>
		     	<td>
			      	<c:if test="#{flowScope.step == 0}">
			      		<h:inputText styleClass="socialGroup" autocomplete="off" id="group" value="#{deathHOHBean.group}" converter="#{socialGroupExtIdConverter}" disabled="#{flowScope.step >= 1}" />
			      	</c:if>
			      	<c:if test="#{flowScope.step gt 0}">
			      		<h:inputText styleClass="socialGroup" autocomplete="off" id="group" value="#{deathHOHBean.socialGroup}" converter="#{socialGroupExtIdConverter}" disabled="#{flowScope.step >= 1}" />
			      	</c:if>	
		     		<script>document.getElementById('form:group').focus();</script>
		        </td>
	      		<td><h:message for="group" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
	   		</tr>
	       		              
	    	<c:if test="#{flowScope.step >= 1 and flowScope.deathHOH}">      
	        	<tr>		              
	            	<td><h:outputText value="#{msg.deathHOHSuccessorIndividualId}"/></td>
	             	<td><h:inputText styleClass="individual" autocomplete="off" id="successor" value="#{deathHOHBean.successor}" converter="#{individualExtIdConverter}" disabled="true" /></td>
	        		<td><h:message for="successor" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
				</tr>
				<tr>
	                <td><h:outputText value="#{msg.deathPlace}:"/></td>
	                <td><h:inputText id="deathPlace" value="#{deathCrud.item.deathPlace}" converter="#{defaultConverter}" disabled="#{flowScope.deathIsSet}"/></td>
	                <td><h:message for="deathPlace" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
				</tr>
				<tr>
	                <td><h:outputText value="#{msg.deathDate} (#{siteProperties.dateFormat}) "/></td>
	                <td><o:dateChooser id="deathDate" value="#{deathCrud.deathDate}" pattern="#{siteProperties.dateFormat}" disabled="#{flowScope.deathIsSet}" /></td>
	                <td><h:message for="deathDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
				</tr>
				<tr>
					<td><h:outputText value="#{msg.fieldWorkerId}:"/></td>
	                <td><h:inputText styleClass="collectedBy" autocomplete="off" id="fieldWorker" value="#{deathCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}" disabled="#{flowScope.deathIsSet}"/></td>
	                <td><h:message for="fieldWorker" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
	            </tr>
	            <tr>
	               	<td><h:outputText value="#{msg.visitId}:"/></td>
	               	<td><h:inputText styleClass="visit" autocomplete="off" id="visit" value="#{deathCrud.item.visit}" converter="#{visitExtIdConverter}" disabled="#{flowScope.deathIsSet}" /></td>
	        		<td><h:message for="visit" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
	            </tr>
	            <script>
	           		document.getElementById('form:deathPlace').focus();
					document.getElementById('form:group').focus();
				</script>
			</c:if>
		</table>
	
		<c:if test="#{flowScope.step >= 1 and flowScope.deathHOH}">      
	 		<h4>#{msg.deathHOHSelectSuccessor}: #{deathHOHBean.socialGroup.extId} </h4>		
	       	<table class="base-table" width="50%">
	           	<tr class=",alt">
	               	<td rowspan="2" class="alt-col," valign="top">
	                   	<c:if test="#{deathHOHBean.sizeOfIndividualsOfSocialGroup == 0}" >  
	                   		<h:outputText value="#{msg.individualEmpty}" />
	                 		</c:if>
	                       <h:dataTable styleClass="base-table"
	                          value="#{deathHOHBean.individualsOfSocialGroup}"
	                          var="indiv" width="100%" rowClasses=",alt"
	                          columnClasses=",,alt-col" rendered="#{deathHOHBean.sizeOfIndividualsOfSocialGroup > 0}">
	                       	<h:column>  
	                           	<f:facet name="header">
	                               	<h:outputText value="#{msg.individualId}" />
	                            	</f:facet>
	                             	<h:outputText value="#{indiv.extId}" />
	                           </h:column>
	                           <h:column>  
	                               <f:facet name="header">
	                               	<h:outputText value="#{msg.individualFullName}" />
	                            	</f:facet>
	                             	<h:outputText value=" #{indiv.firstName} #{indiv.lastName}" />
	                           </h:column>
	                           <h:column>
								<f:facet name="header"/>		                       	
								<h:commandLink immediate="true" value="#{msg.lblSelect}" action="setIndividual" rendered="#{deathHOHBean.membershipListSize == 0}">
									<f:param name="indivId" value="#{indiv.uuid}" />
								</h:commandLink>
							</h:column>
	                       </h:dataTable>
	                       <br />
						<h:commandButton immediate="true" rendered="#{deathHOHBean.successor != null}" value="#{msg.deathHOHClearSelectedIndividual}" action="clearIndividual" />
						<br />
	                   </td>   
	               </tr>
	           </table>  
	        </c:if>              
              
	         <c:if test="#{deathHOHBean.selectedSuccessor != null}">
	    		<h4>#{msg.deathHOHCreateMembership}: #{deathHOHBean.selectedSuccessor.extId}</h4>  
				<table class="base-table" width="50%" >
	          		<tr class=",alt">
	              		<td rowspan="2" class="alt-col," valign="top">
	                  		<c:if test="#{deathHOHBean.membershipListSize == 0}" >  
	             				<h:outputText value="#{msg.membershipEmpty}" />
	           				</c:if>
	                      	<h:dataTable styleClass="base-table"
	                         value="#{deathHOHBean.membershipsOfSocialGroup}"
	                         var="mem" width="100%"
	                         rowClasses=",alt" columnClasses=",,alt-col" rendered="#{deathHOHBean.membershipListSize > 0}">
	                        	<h:column>  
	                           		<f:facet name="header">
	                           			<h:outputText value="#{msg.individualId}" />
	                     		 	</f:facet>
	                      	  		<h:outputText value="#{mem.individual.extId}" />
	                         	</h:column> 
	                            <h:column>
	                            	<f:facet name="header">
	                                	<h:outputText value="#{msg.individualFullName}" />
	                                </f:facet>
	                            	<h:outputText value="#{mem.individual}" />
	                            </h:column>
	                          	<h:column>
	                            	<f:facet name="header">
	                            		<h:panelGroup>
	                            			<h:outputText value="#{msg.navBarRelationship}" /> <br />
	                            			<img class="clickable" onclick="O$('popupWindowForRelationship').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                            		</h:panelGroup>
	                                </f:facet>
	                            	<h:outputText value="#{mem.bIsToA}" />
	                            </h:column>   
	                      	</h:dataTable>
	                      	<br />
	                      	<h:commandButton id="newMembershipBtn" value="#{msg.deathHoHAddMembership}" action="newMembership"/>
	              		</td>
	              	</tr>
	     		</table>
			</c:if>
  			
	  		<h:commandButton id="setGroupBtn" value="#{msg.lblSelect}" action="setGroup" rendered="#{flowScope.step == 0}"/>
	    	<br />
	    	<c:choose>
	         	<c:when test="#{flowScope.step >= 1}">
	           		<c:if test="#{deathHOHBean.numOfSocialGroups > deathHOHBean.current}">
	           			<h:commandButton id="continueBtn" action="continue" value="#{msg.lblContinue}"/>
	           		</c:if>
	           		<c:if test="#{deathHOHBean.numOfSocialGroups == deathHOHBean.current}">
	           			 <h:commandButton id="createBtn" action="create" value="#{msg.lblCreate}"/>
	           		</c:if>
	           		<h:commandButton immediate="true" value="#{msg.lblCancel}" action="finish" rendered="#{flowScope.deathHOH}" />
	           	</c:when>
			</c:choose>
        </h:form>
    </ui:define>
</ui:composition>